<template>
  <div class="jyzt">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24" style="margin-top: 20px">
        <el-card v-loading="loading" element-loading-text="Loading..." element-loading-background="#178af01a">
          <div class="center-title">{{ title }}</div>
          <!-- <div v-if="path == '/whcc'" class="content">
            <div v-for="(el, index) in tableData" :key="el.title" class="tableItem">
              <img style="width: 150px; height: 200px" :src="getUrl(el.icon)" alt="" />
              <div class="title">{{ el.title }}</div>
            </div>
          </div> -->
          <div>
            <div v-for="(el, index) in tableData" :key="el.title" class="tableItem1" @click="onClickRow(el)">
              <div class="content">
                <div class="top">
                  <div class="circle">{{ index + 1 }}、</div>
                  <div class="title">{{ el.title }}</div>
                </div>
              </div>
            </div>
            <el-pagination
              v-model:current-page="queryParams.pageNum"
              v-model:page-size="queryParams.pageSize"
              :total="queryParams.total"
              background
              class="pagination"
              layout="prev, pager, next"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog v-model="dialog.visible" class="customDialog" :title="dialog.title" width="500px">
      <el-form ref="demoFormRef" class="queryForm" :model="form" label-width="100px">
        <!-- readonly="readonly" -->
        <!-- <el-form-item label="租户编号" prop="tenantId">
          <el-input v-model="form.tenantId" />
        </el-form-item> -->
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item label="发布时间" prop="fbsj">
          <el-input v-model="form.fbsj" />
        </el-form-item>
        <el-form-item label="文化内容" prop="content">
          <el-input v-model="form.content" type="textarea" />
        </el-form-item>
        <el-form-item label="所属村" prop="ssc">
          <el-input v-model="form.ssc" />
        </el-form-item>
        <el-form-item label="所属乡镇" prop="ssxz">
          <el-input v-model="form.ssxz" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" />
        </el-form-item>
        <el-form-item label="图片" prop="ssxz">
          <imageUpload v-model="form.file" :isShowTip="false" :disabled="true" />
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { getXcwhList } from '@/views/hbwlpc/hooks/mixinsMenus';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const $szxcapi = (proxy as any)?.$szxcapi;
const props = defineProps({
  path: {
    type: String,
    default: ''
  },
  lmId: {
    type: String,
    default: ''
  }
});
const loading = ref(false);
const title = ref('');
const dir = ref('');
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0
});
const demoFormRef = ref<ElFormInstance>();
const initFormData = {
  id: undefined,
  tenantId: undefined,
  title: undefined,
  fbsj: undefined,
  content: undefined,
  tp: undefined,
  ssc: undefined,
  ssxz: undefined,
  remark: undefined,
  file: undefined
};
const data = reactive({
  form: { ...initFormData }
});
const { form } = toRefs(data);
const dialog = reactive<DialogOption>({
  visible: false,
  title: '详情信息'
});
const reset = () => {
  form.value = { ...initFormData };
  demoFormRef.value?.resetFields();
};
const onClickRow = async (el) => {
  reset();
  const _id = el?.id;
  const res = await $szxcapi.infoQuery({ id: _id });
  Object.assign(form.value, res.data);
  dialog.visible = true;
};
const tableData = ref([{ title: '神奇的大梁山' }, { title: '魔家四将故居遗址' }, { title: '青云山' }]);
const getUrl = (icon) => {
  return new URL(`../../../assets/szxc/${icon}.png`, import.meta.url).href;
};
const handleCurrentChange = (e) => {
  queryParams.value.pageNum = e;
  init();
};
const init = async () => {
  loading.value = true;
  const data = await getXcwhList(props, queryParams.value);
  tableData.value = data.rows;
  queryParams.value.total = data.total;
  loading.value = false;
};
onMounted(async () => {
  await nextTick();
  init();
});
watch(
  () => props.lmId,
  (value) => {
    init();
  },
  {
    immediate: true,
    deep: true
  }
);

watch(
  () => props.path,
  (val) => {
    console.log('al', val);
    if (val == '/whcc') {
      title.value = '文化传承';
    } else if (val == '/jgyz') {
      title.value = '景观遗址';
    } else {
      title.value = '乡村文明';
    }
  },
  {
    immediate: true,
    deep: true
  }
);
</script>

<style lang="scss" scoped>
.jyzt {
  width: 100%;
  height: 100%;
  font-family: 'DingTalk';
  color: white;
  overflow: hidden;
  .el-card {
    max-height: calc(90vh - 111px) !important;
    overflow: hidden auto;
    background: #178af01a;
    border: none;
    .center-title {
      font-weight: 700;
      font-size: 20px;
      color: white;
      margin-bottom: 14px;
    }
    .el-pagination {
      display: flex;
      justify-content: flex-end;
    }
  }
  .content {
    display: flex;
    flex-wrap: wrap;
  }
  .tableItem {
    width: 20%;
    margin-bottom: 10px;
    color: white;
    .title {
      width: 150px;
      text-align: center;
    }
  }
  .tableItem1 {
    margin-bottom: 10px;
    cursor: pointer;
    color: white;
    border-bottom: 1px solid rgba(74, 177, 255, 0.2);

    .content {
      height: 30px;
      display: flex;
      justify-content: space-between;
      .top {
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
